<template>
  <baidu-map
    class="bm-view map"
    ak="YwNcT9TLvDyyNv2B4MLKSmvGylhFU57V"
    @ready="map_handler"
    :center="center"
    :scroll-wheel-zoom="true"
    :zoom="12"
  >
    <!-- <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :showAddressBar="false"
      :autoLocation="true"
      :locationIcon="{url: require(''), size: {width: 18, height: 18}}"
      @locationSuccess="getLoctionSuccess"
      @locationError="getLocationError"
    ></bm-geolocation>-->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess"></bm-geolocation>
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
    <my-overlay
      v-for="item in areascale"
      :storename="item.b_d_name"
      :userid="item.op_id"
      :key="item.b_d_id"
      :bdid="item.b_d_id"
      :position="{lng: item.b_d_longitude, lat: item.b_d_latitude}"
      :text="item.b_d_name+' | '+item.merc_num+'间'"
      :active="active"
      @mouseover.native="active = true"
      @mouseleave.native="active = false"
      @func="storelist"
    ></my-overlay>
    <!-- 店铺列表 -->
    <store-list class="storelist"></store-list>
  </baidu-map>
</template>
  
<script>
import { BaiduMap, BmScale, BmGeolocation,BmNavigation }  from "vue-baidu-map";
import BmOverlay from "vue-baidu-map/components/overlays/Overlay.vue";
import MyOverlay from "./components/MyOverlay.vue";
import StoreList from "./components/StoreList.vue";

export default {
  data() {
    return {
      center: { lng: 113.93139, lat: 22.51494 },
      // center: { lng: 0, lat: 0 },
      active: false,
      show: false,
      listval: "asdf",
      areascale:[]
    };
  },
  components: {
    BaiduMap,
    BmGeolocation,
    BmNavigation,
    BmOverlay,
    MyOverlay,
    StoreList
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    // map_handler({ BMap, map }) {
    //   console.log(map);
    //   let _this = this;
    //   this.BMap = BMap;
    //   this.map = map;
    //   this.map_zoom = 15;
    // },
    map_handler ({BMap, map}) {
				let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r){
					console.log(r);
					_this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
					_this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
          _this.initLocation = true;	
          // alert(r.longitude, r.latitude)
					console.log('center:', _this.center)	// 如果这里直接使用this是不行的
				},{enableHighAccuracy: true})
			},
    //接收子组件storelist传过来的数据
    storelist(val) {
      this.listval = val;
      console.log(val);
    },
    getLoctionSuccess(point, AddressComponent, marker){
        console.log(point)
      }
  },
  created(){
    // this.$axios.post("http://192.168.0.107/api/map/bdfind",
     this.$axios.get('http://www.sznysq.cn/api/map/areascale',{       // 还可以直接把参数拼接在url后边
    }).then((res)=>{
        console.log(res.data.data);
        this.areascale = res.data.data;
    }).catch(function (error) {
        console.log(error);
    });
}
};
</script>

<style>
.bm-view {
  width: 100%;
  height: 100%;
}
.sample {
  width: 130px;
  height: 37px;
  line-height: 37px;
  font-size: 13px;
  /* line-height: 40px; */
  /* background: rgba(0,0,0,0.5); */
  background: url("../../assets/jx.png") no-repeat;
  background-size: 130px 37px;
  overflow: hidden;
  /* box-shadow: 0 0 5px #000; */
  color: #fff;
  text-align: center;
  position: absolute;
}
.sample.active {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

/* #### */

</style>